<!--
发布地震页面
创建人:pixianlei
日  期:2017年5月6日
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布地震</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="$LAYUI/css/layui.css" media="all" />
    <script type="text/javascript" src="$LAYUI/layui.js"></script>
    <script type="text/javascript" src="$JS/jquery-2.1.1.min.js"></script>
    <script async defer src="http://maps.google.cn/maps/api/js?key=AIzaSyCbLfKHIBp1w36w3y04cK92v2uYNUuO9OU&callback=initMap"></script>
    
    <!--截图js start-->
    <!-- <script language="javascript" src="public/js/niuniucut/jquery-1.6.4.min.js"></script>
    <script language="javascript" src="public/js/niuniucut/jquery.md5.js"></script>
    <script language="javascript" src="public/js/niuniucut/niuniucapture.js?v=20150926"></script>
    <script language="javascript" src="public/js/niuniucut/capturewrapper.js?v=20150926"></script>
    <script language="javascript" src="public/js/niuniucut/jquery.json-2.3.min.js?v=20150926"></script> -->
    <!--截图js end-->
    <style type="text/css">
      .layui-input-block input{
        width: 150px;
      }
      .layui-input-block {
    margin-left: 110px;
    min-height: 36px;
      }
      .layui-input-block::after {
    clear: both;
    display: block;
    content: '';
      }
      #laydate_today{
        display: none !important;
      }
    </style>
</head>
<body>
<div style="margin-top: 2%;border-bottom: 3px solid #1aa094;height: 102px;">
  <div style="float: left;width: 25%;">
       <div class="layui-form-item">
        <label class="layui-form-label">经度:</label>
        <div class="layui-input-block">
          <input type="text" id="longtitude" name="longtitude" required  lay-verify="number" placeholder="请输入经度" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">纬度:</label>
        <div class="layui-input-block">
          <input type="text" id="latitude" name="latitude" required  lay-verify="number" placeholder="请输入纬度" autocomplete="off" class="layui-input">
      </div>
      </div>
  </div>

  <div style="float: left;width: 25%;">
    <div class="layui-form-item">
      <label class="layui-form-label">震级:</label>
      <div class="layui-input-block">
        <input type="text" id="magnitude" name="magnitude" required  lay-verify="number" placeholder="请输入震级" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">深度:</label>
      <div class="layui-input-block">
        <input type="text" id="depth" name="depth" required  lay-verify="number" placeholder="请输入深度/km" autocomplete="off" class="layui-input">
      </div>
      <!-- <label class="layui-form-label">千米</label> -->
    </div> 
  </div>

  <div style="float: left;width: 25%;">
        <div class="layui-form-item">
          <label class="layui-form-label">地震时间:</label>
          <div class="layui-input-block">
           <input class="layui-input" id="time" placeholder="自定义日期格式" onclick="layui.laydate({elem: this,min:'2015-01-01 00:00:00',max:'2015-12-31 23:59:59', istime: true, format: 'YYYY-MM-DD hh:mm:ss',btns: ['clear', 'confirm']})">
          <!-- <input placeholder="自定义日期格式" onclick="layui.laydate({elem: this,btns: ['clear']})"> -->
          </div>
        </div>
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">烈度:</label>
          <div class="layui-input-block">
            <input type="text" id="Intensity" name="Intensity" required  lay-verify="number" placeholder="请输入烈度" autocomplete="off" class="layui-input">
          </div>
        </div> -->
  </div>

  <div style="float: left;width: 25%;margin-top: 2%">
    <div class="layui-form-item">
      <div class="">
        <button class="layui-btn"  style="float: left;" lay-submit lay-filter="formDemo" onclick="getGooglePoint()"> 选择震源</button>
         <input type="button"  style="float: right;" value="确认提交" class="layui-btn" lay-submit lay-filter="formDemo1" onclick="getCityName()">
      </div>
    </div>
  </div>

    
  </div>

  <div id="map" style="width: 100%;height:600px;"></div>

  <!--牛牛截图需要的div  start-->
 <div id="moreparams" style="padding-left:118px;height:30px;" id="ctlDiv"> 
     <div id="posdetail" style="display:none;position: relative; float:left;padding-left:20px;">
     left:<input class="inputtext" type="input" id="xpos"  value="300"></input>&nbsp;
     top:<input class="inputtext" type="input" id="ypos"  value="300"></input>&nbsp;
     width:<input class="inputtext" type="input" id="width"  value="1000"></input>&nbsp;
     height:<input class="inputtext" type="input" id="height"  value="500"></input>
     </div>
    </div> 
    <iframe id="downCapture" style="display:none;"></iframe>
  <!--牛牛截图需要的div  end-->

  <script type="text/javascript">

  layui.use(['layer','laydate'], function(){
  var layer = layui.layer,
  laydate = layui.laydate;

  var start = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: laydate.now()
    ,max: '2015-12-31 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
 
});
  </script>
<script type="text/javascript">
var map;
function initMap()
{
    map=new google.maps.Map(document.getElementById('map'),{
    zoom:10,
    streetViewControl:false,
    center:{lat: 39.915, lng: 116.404}    
  });   
}
</script>
<script type="text/javascript">
 var longtitude=null;
 var latitude=null;
 var depth=null;
 var magnitude=null;
 var addComp=null;
 var city=null;
 var time=null;
 var province=null;
 var district=null;
 var Intensity=null;
 var learnmarker=null 
 //根据坐标获取地区名称
function getCityName(){

  longtitude=parseFloat(parseFloat(document.getElementById("longtitude").value).toFixed(4));//经度
  latitude=parseFloat(parseFloat(document.getElementById("latitude").value).toFixed(4));//纬度
  depth=parseFloat(document.getElementById("depth").value);//深度
  magnitude=parseFloat(document.getElementById("magnitude").value);//震级
  time=document.getElementById("time").value;//时间
  Intensity=parseInt(magnitude)+2//parseFloat(document.getElementById("Intensity").value);//烈度
  if(!longtitude||!latitude||!depth||!magnitude||!time||!Intensity){
    layer.msg('请完善数据');
   // return false;
  }else{
 
  getCity();//获得县名称
  }
  //这里添加截图代码
 
  //cutss();

  //刷新页面
  //setTimeout("parent.location.reload();",1000);
   
}
function getCity(){
  
var point = new google.maps.LatLng({lat: latitude, lng: longtitude});
var geocoder = new google.maps.Geocoder; //地位到经纬度的地方
map.setCenter(point);
map.setZoom(10);
var  marker=new google.maps.Marker({
    position:point,
    map:map,
    icon:'$IMAGES/circle.png'
  });
geocoder.geocode({'location': point}, function(results, status) {
            if (status === 'OK') {
              if (results[1]) { 
                map.setCenter(point);
                results[0].address_components[0] != undefined ? street=results[0].address_components[0].long_name : street=null;
                results[0].address_components[1] != undefined ? district=results[0].address_components[1].long_name : district=null;
                results[0].address_components[2] != undefined ? city=results[0].address_components[2].long_name : city=null;
                results[0].address_components[3] != undefined ? province=results[0].address_components[3].long_name : province=null;
                // street=results[0].address_components[0].long_name   
                // district=results[0].address_components[1].long_name;//县
                // city=results[0].address_components[2].long_name;//市
                // province=results[0].address_components[3].long_name;//省
             $.ajax({  
                          type:'post',   //方法  
                          url:'/know/public/index/pubear/baseInfo',      //文件路径  
                         // url:'index.php/MAGNITUDE/test2/',      //文件路径  
                          dataType:'text',//用的是什么字符，json字符在js中相当有优势  
                          data:{"longtitude":longtitude,"latitude":latitude,"depth":depth,"magnitude":magnitude,"time":time,"city":city,"province":province,"district":district,"Intensity":Intensity,"street":street},//data:"IntensityValue=" + params,//要传送的数据  
                            async: true,//是否同步或者异步  
                          success:function(data){ 
                            layer.msg('提交成功');
                            var data= eval("("+data+")");
                            if(!isNaN(data))
                            {
                              data=parseInt(data);
                              if(data)
                              {
                                //var _iframe=window.parent;
                                //var check=_iframe.document.getElementById('checkPage');
                                //check.value=data;
                                layer.msg("发布成功");
                              }else{
                                layer.msg("找不到城市");
                              }
                              
                            }else{
                              layer.msg("无数据");
                            }
    
                          },  
                          error: function(data){  
                           layer.msg("网络错误");
                           }  
                    });
              } else {
                layer.msg("非中国地域");
                map.setCenter(point);
                
                   }
            } else {
              layer.msg("请求失败");
              map.setCenter(point);
              
                }
        });


}
  //获取圆心点
    function getGooglePoint(){
          var click_addmarker=google.maps.event.addListener(map,"click",function(event){
            addmarkerpoint(event);
            
          });
    function addmarkerpoint(event)
    {
        if(learnmarker!=undefined){
          learnmarker.setMap(null);
        }
          if (event.latLng){         
          var marker = new google.maps.Marker({
            position:event.latLng,
            map:map,
            icon:'$IMAGES/circle.png'
          });
          learnmarker=marker;
          var x=marker.getPosition();
          document.getElementById("longtitude").value=(x.lng()).toFixed(4);
          document.getElementById("latitude").value=(x.lat()).toFixed(4);
          google.maps.event.removeListener(click_addmarker);
          }
    };
               
    }
 </script>

<!--截图js开始-->
 <script type="text/javascript">
      //niuniu自动截图的方法
    // setTimeout("cutss();",2000);
    function cutss(){
      Init();
      StartCapture('twoDimension');
    }
 </script>
<!--截图js结束-->
</body>
</html>
